
.shopping-cart {
  padding: 20px; /* 购物车内边距 */
}

.header {
  font-size: 24px; /* 标题字体大小 */
  font-weight: bold; /* 标题字体加粗 */
  margin-bottom: 20px; /* 标题下边距 */
}

.product-list {
  margin-bottom: 20px; /* 商品列表下边距 */
}

.product {
  border: 1px solid #ccc; /* 商品边框 */
  margin-bottom: 10px; /* 商品间距 */
  padding: 10px; /* 商品内边距 */
}

.product-info {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 商品信息左右分布 */
}

.quantity-controls {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中对齐 */
}

.quantity-controls input {
  width: 50px; /* 输入框宽度 */
  text-align: center; /* 输入框文本居中 */
}

.product-total {
  color: #e94826; /* 小计字体颜色 */
}

.delete-button {
  color: red; /* 删除按钮字体颜色 */
  cursor: pointer; /* 鼠标指针样式 */
}

.summary {
  font-size: 18px; /* 统计信息字体大小 */
  margin-top: 20px; /* 统计信息上边距 */
}

.add-product,
.checkout-button {
  padding: 10px; /* 按钮内边距 */
  background: #317ee7; /* 按钮背景颜色 */
  color: white; /* 按钮字体颜色 */
  text-align: center; /* 按钮文本居中 */
  margin-top: 20px; /* 按钮上边距 */
  cursor: pointer; /* 鼠标指针样式 */
}

.add-product:hover,
.checkout-button:hover {
  background: #0056b3; /* 鼠标悬停时改变背景颜色 */
}